import React from 'react';
import {
  View,
  Image,
  Text,
  ListView,
  TouchableOpacity
} from 'react-native';

import BasePage from '../common/BasePage';
import SizeUtils from '../../common/SizeUtils';
import Config from '../../config';

export default class VipFeedback extends BasePage {
  constructor(props) {
    super(props);
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2, r3, r4) => r1 !== r2 !== r3 !== r4});
    this.state = {
      dataSource: ds.cloneWithRows([
        {bbWidth:SizeUtils.translateDesignNumToCode(3), name:"新手上路", title:"新手上路",
          pageKey: Config.pages.guahao_hospital_web, config_key:"greenhand_config"},
        {bbWidth:SizeUtils.translateDesignNumToCode(3), title:"我要荐商",
          pageKey: Config.pages.vipsuggest},
        ]
      ),};
  }
  //{bbWidth:SizeUtils.translateDesignNumToCode(0), title:"金融资讯",
    //pageKey: Config.pages.vipfeedback}

  _listItemRender(rowData){
    return(
      <TouchableOpacity onPress={() => {this.gotoPage(rowData.pageKey, {buttonData:rowData})}}>
        <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
            borderColor:"#eeeeee", paddingTop:SizeUtils.translateDesignWidthToCode(44),
            paddingBottom:SizeUtils.translateDesignWidthToCode(44),
            paddingLeft:SizeUtils.translateDesignWidthToCode(44),
            borderBottomWidth:rowData.bbWidth,width:SizeUtils.getWindowSize().width,
            }}>
            <View style={{justifyContent: 'flex-start',}}>
              <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28),}}>{rowData.title}</Text>
            </View>
            <View style={{justifyContent: 'flex-end', paddingRight:SizeUtils.translateDesignWidthToCode(44),
            }}>
             <Image style={{ transform:[{scaleX:-1}], }} source={require("../../../resource/images/common/Back-icon.png")}  />
            </View>
        </View>
      </TouchableOpacity>
    )
  }

  render() {
    return(
      <View style={{width:SizeUtils.getWindowSize().width, height:SizeUtils.getWindowSize().height,
         paddingTop:Config.paddingTop + SizeUtils.translateDesignHeightToCode(20), alignItems: 'center', backgroundColor:"#ffffff"}}>
         {this._renderNavigationBar()}
         <View style={{flexDirection: 'column', justifyContent:"flex-end",alignItems: "center", backgroundColor:"#ffffff",
          height:SizeUtils.getWindowSize().height - SizeUtils.translateDesignHeightToCode(40),width:SizeUtils.getWindowSize().width}}>
           <ListView
             dataSource={this.state.dataSource}
             renderRow={this._listItemRender.bind(this)}
           />
         </View>
      </View>
    )
  }
}
